{extend name="base"/}
{block name="resources"}
<style>
    .ns-purchase-page{display: flex;width: 615px;margin: 35px auto;color: #333;}
    .ns-purchase-page .purchase-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
    .ns-purchase-page .purchase-img img{max-width: 100%;max-height: 100%;}
    .ns-purchase-page .purchase-content{flex: 1;}
    .ns-purchase-page .purchas-title{font-size: 18px;color: #323233;line-height: 24px;margin-bottom: 8px;}
    .ns-purchase-page .purchas-desc{color: #969799;line-height: 20px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .ns-purchase-page .purchas-price span:nth-of-type(2){}
    .ns-purchase-page .purchas-period, .ns-purchase-page .purchas-shop{
        margin-top: 20px;
    }
    .ns-purchase-page .purchas-period .period-title, .ns-purchase-page .purchas-shop .shop-title{
        font-size: 16px;
    }
    .ns-purchase-page .purchas-period .period-content{
        display: flex;
        margin-top: 10px;
    }
    .ns-purchase-page .purchas-period .period-content li{
        width: 122px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #e5e5e5;
        cursor: pointer;
    }
    .ns-purchase-page .purchas-period .period-content li + li{
        margin-left: 5px;
    }
    .ns-purchase-page .purchas-shop .shop-content{
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        padding: 20px;
        border: 1px solid #e5e5e5;
        box-sizing: border-box;
    }
    .ns-purchase-page .purchas-shop .shop-content input{
        padding-left: 10px;
        border: 1px solid #e5e5e5;
        height: 30px;
        line-height: 30px;
        width: 80px;
    }
    .ns-purchase-page .purchas-shop .shop-content-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 35px;
    }
    .ns-purchase-page .purchas-shop .shop-content-between .content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 125px;
    }

    .ns-purchase-page .purchas-shop .shop-content-between .content span{
        display: inline-block;
        width: 80px;
        text-align: center;
    }
    .ns-purchase-page .purchas-shop .shop-content-state{
        margin-top: 10px;
        color: #9f9fa1;
    }
    .detail-operation{
        margin-top: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .detail-operation .total{
        margin-right: 10px;
    }
    .detail-operation .total span{
        font-size: 18px;
    }
</style>
{/block}
{block name="main"}
<div class="ns-purchase-page layui-form">
    <div class="purchase-img">
        <img src="{:img($info.image)}" onerror=src="HOME_IMG/package.png" />
    </div>
    <div class="purchase-content">
        <h2 class="purchas-title">{$info.group_name} <span class="purchas-price ns-text-color">{$info.fee}元/{$info.num}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</span></h2>
        <p class="purchas-desc">{$info.desc ?: '暂无描述'}</p>
        <div class="purchas-period">
            <div class="period-title">购买时长</div>
            <ul class="period-content">
                <li class="ns-text-color ns-border-color">{$info.num}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</li>
                <li>{$info.num * 2}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</li>
                <li>{$info.num * 3}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</li>
                <li>{$info.num * 4}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</li>
            </ul>
        </div>
        <div class="purchas-shop">
            <div class="shop-title">购买店铺数量</div>
            <div class="shop-content">
                <div class="shop-content-between">
                    <span>免费店铺数</span>
                    <span class="content"><span class="ns-text-color">{$info.site_num}</span>个</span>
                </div>
                <div class="shop-content-between shop-content-number">
                    <span>购买店铺数</span>
                    <span class="content"><input type="number" value="0">个</span>
                </div>
                <div class="shop-content-state">
                    <span>附加说明：</span>
                    <span>当免费店铺数量满足不了商城需求时，可以选择购买店铺数量。</span>
                </div>
                <div class="shop-content-state">
                    <span>价格说明：</span>
                    {php}
                    $tiered_pricing = json_decode($info['create_site_json'],true);
                    {/php}
                    <span>
                    {foreach $tiered_pricing as $list_k =>  $list_v}
                    {if $list_v.num == 0}店铺默认单价为<span class="ns-red-color">{$list_v.price}元</span>;{else/}当购买店铺数量大于等于{$list_v.num}时，店铺单价为<span class="ns-red-color">{$list_v.price}元</span> ;{/if}
                    {/foreach}
                    </span>
                </div>
            </div>
        </div>

        <div class="detail-operation">
            <div class="total">
                合计：<span class="ns-red-color">￥{$info.fee}</span>
            </div>
            <button class="layui-btn ns-bg-color submit-order">提交订单</button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var groupId = "{$info.group_id}",
        fee = "{$info.fee}", //默认套餐费用
        period = 1, //周期
        tieredPricing ={:html_entity_decode($info['create_site_json'])},
        tieredPricingNum = [],
        tieredPricingPrice = [],
        shopPrice = 0, //店铺价格
        repeat_flag = false,
        shopNum = 0; //店铺数量

    for (var i in tieredPricing){
        tieredPricingNum.push(tieredPricing[i].num);
        tieredPricingPrice.push(tieredPricing[i].price);
    }

    // 套餐周期
    $(".period-content li").click(function () {
        period = $(this).index() + 1;
        $(this).addClass("ns-text-color ns-border-color").siblings().removeClass("ns-text-color ns-border-color");

        calculationTotal();
    });

    //监听店铺数量
    $(".shop-content-number input").on("input propertychange",function(){
        shopNum = $(this).val() ? $(this).val() : 0;
        shopNum = parseInt(shopNum);
        if(shopNum < 0){
            $(this).val(0)
            shopNum = 0;
            layer.msg("增加的店铺数量不能小于零");
        }
        for (var i = 0; i < tieredPricingNum.length; i++){

            if (shopNum <=  parseFloat(tieredPricingNum[i]) || i == tieredPricingNum.length - 1){
                shopPrice = shopNum ==  parseFloat(tieredPricingNum[i]) || shopNum >  parseFloat(tieredPricingNum[i]) ? parseFloat(tieredPricingPrice[i]) : parseFloat(tieredPricingPrice[i-1]);
                break;
            }
        }
        calculationTotal();
    });

    //计算合计
    function calculationTotal(){
        var total = shopNum * shopPrice + period * parseFloat(fee);
        $(".detail-operation .total span").text("￥" + total);
    }
    
    // 提交订单
    $(".detail-operation .submit-order").click(function () {
        if (repeat_flag) return false;
        repeat_flag = true;

        $.ajax({
            type: 'POST',
            url: ns.url("home/ordercreate/create"),
            data: {'group_id': groupId,'num': period, 'create_site_num': shopNum},
            dataType: 'JSON',
            success: function(res) {
                layer.msg(res.message);
                repeat_flag = false;

                if (res.code >= 0) {
                    location.href = ns.url('home/ordercreate/confirm', {out_trade_no:res.data});
                } else {
                    location.reload();
                }
            }
        });
    });

    function back() {
        location.href = ns.url("home/sysusergroup/index");
    }
</script>
{/block}